Développer votre propre carte avec Mapbox

De quoi parle cet article ?

Dans mon article sur les meilleurs outils d’intégration de carte, je vous présentais quatre solutions différentes pour ajouter une carte sur un site ou sur son blog. Parmi ces solutions, on retrouve Mapbox, une technologie qui permet d’afficher des cartes sur un site web, exactement comme le fait le service de Google Maps.

On va le voir, faire une intégration customisée de carte, c’est la solution qui est en même temps la plus complexe, mais aussi la moins coûteuse si vous le faites vous-même. C’est aussi celle qui vous permettra d’atteindre le résultat le plus abouti, à votre image, si vous avez du temps à y passer.

Si vous n’avez pas le temps ou que vous n’avez pas les compétences pour développer une carte avec Mapbox ou Google Maps, je vous invite à trouver d’autres solutions sur cet article de blog, mais sachez que celle qui vous permettra d’atteindre le résultat le plus proche d’une intégration customisée et le plus rapidement sera très probablement TraveledMap.

Cette note ci-dessus n’est pas un hasard. Quand j’ai développé TraveledMap, je l’ai fait dans l’objectif de simplifier l’utilisation des technologies comme Mapbox et Google Maps, pour les gens qui n’ont pas le temps ou pas les compétences pour le faire.
Il est important de noter que j’ai principalement utilisé Mapbox avec React, un framework accélérant le développement, rendant le site plus réactif et souvent plus fiable (moins buggé), mais il est très probable que votre cas d’utilisation soit plutôt porté sur une intégration de Mapbox en Javascript pur et simple. J’expliquerais donc comment intégrer une carte avec Mapbox sans framework et en attirant une attention particulière sur le développement pour un site WordPress.

Sommaire

Créer la carte

Pour démarrer avec Mapbox, il est nécessaire de se créer un compte, sans quoi vous ne pourrez pas afficher une carte. Je vous invite donc à vous rendre sur leur site pour vous créer un compte. Une fois le compte activé, vous aurez accès à votre dashboard, qui contient une information qui nous intéresse particulièrement:
Votre access token (qui doit commencer par pk.)

Cet access token est une clé qui est nécessaire pour vous identifier lorsque vous demanderez à afficher une carte. L’objectif est double:

Ça permet de faire le lien entre la carte et votre compte, prenant ainsi en considération les modifications que vous avez pu apporter aux cartes sur votre compte Mapbox. Vous pouvez par exemple créer des styles particuliers grâce au studio, qui sont privés par défaut, et qui ne seraient pas trouvés si vous vous serviez de la clé de quelqu’un d’autre.
Ça permet aussi de comptabiliser le nombre de cartes que vous avez affiché à des fins de statistiques et aussi de paiement.

Mapbox offre 50 000 chargements de carte par mois, ce qui est suffisant dans la plupart des cas. En revanche, si vous créez un site qui aura rapidement plus de 50 000 visites sur la page où se trouve la carte (ce qui est très compliqué à atteindre), dans ce cas il vous faudra payer 5$ par 1000 vues, au-delà des 50 000 vues gratuites.
Sachez aussi qu’il existe des solutions de remplacement à Mapbox et dont le prix serait moins élevé pour de telles quantités d’affichage. Notez aussi que celà n'exclut pas de développer la carte avec les outils de Mapbox, en utilisant une autre API d'affichage.

C’est parti, on va pouvoir afficher notre première carte !
Je vais vous expliquer partie par partie comment le faire, mais ne vous inquiétez pas, le code final se trouve en bas de page !

Ouvrez le fichier contenant le code HTML de votre page, ou sur WordPress, éditez la page sur laquelle vous souhaitez ajouter la carte en ajoutant un bloc Custom HTML, et ajoutez-y ce contenu:

<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />


<div id="map" style="height: 500px; width: 100%"></div>

<script>
    mapboxgl.accessToken = 'Pensez à remplacer ceci par votre Access Token';
    var map = new mapboxgl.Map({
        container: 'map', // identifiant du conteneur de la carte
        style: 'mapbox://styles/mapbox/light-v10', // URL du style à utiliser
        center: [2, 45], // position par defaut [lng, lat]
        zoom: 2 // zoom par defaut
    });
</script>

Sauvegardez, pré-visualisez et … tadaaaa 🎉 !
Vous devriez voir la carte s’afficher.

Votre première carte sur votre site avec Mapbox

Si on décompose ce code ça donne:

Deux lignes pour charger les ressources nécessaires au bon fonctionnement de la carte:
```
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
```
Notez que le placement de ces lignes influe sur le temps de chargement de votre page. Elles devraient idéalement être placées à la fin du <body> de votre site.
Une ligne pour placer la carte dans la page, contenant aussi le style du conteneur de la carte (500px de hauteur et 100% de la largeur):
```
<div id="map" style="height: 500px; width: 100%"></div>
```

Et pour finir, un script, dans lequel on va exécuter le code permettant de charger la carte:

<script>
    mapboxgl.accessToken = 'Pensez à remplacer ceci par votre Access Token';
    var map = new mapboxgl.Map({
        container: 'map', // identifiant du conteneur de la carte
        style: 'mapbox://styles/mapbox/light-v10', // URL du style à utiliser
        center: [2, 45], // position par defaut [lng, lat]
        zoom: 2 // zoom par defaut
    });
</script>

Pensez à remplacer le texte par votre access token, autrement la carte ne se chargera pas.
Les paramètres passés à la fonction mapboxgl.Map peuvent être changés:

container: doit être le même que l’id de l’élément plaçant votre carte (voir ci-dessus)
style: c’est le style de votre carte. Vous pouvez personnaliser vos cartes en en créant de nouveaux sur Mapbox Studio. Par défaut, vous en avez 4 ou 5 de disponibles. Pré-visualisez les ici.
center: c’est le centre par défaut de la carte. Le premier nombre (2) correspond à la longitude, et le second (45) correspond à la latitude.
zoom: c’est le zoom par défaut, il doit être compris entre 0, qui est le niveau de zoom le plus faible, donc le plus dézoomé, et 20, qui est le plus élevé, donc le plus zoomé.
Au niveau de zoom 20, vous êtes au niveau d’une habitation, le niveau de zoom correspondant donc au cas d’usage de l'affichage de voyages dans le monde se situe donc entre 1 et 3.

Ajouter des marqueurs

Maintenant que vous avez votre carte, que vous pouvez choisir son centre et son zoom par défaut, mais aussi son style, voyons comment ajouter des informations dessus (vos voyages par exemple). Dans cette étape, on va donc essayer de définir une liste de localisations et les représenter sur la carte par des marqueurs.

Mapbox vous propose différents exemples qui sont expliqué, sur cette page.

La première étape, c’est d’ajouter un unique marqueur afin de comprendre comment ça fonctionne. Ajouter un marqueur sur la carte n’est pas compliqué, il suffit de garder le code pour afficher la carte et d’y ajouter cette ligne (juste avant la fermeture de la balise <script />):

new mapboxgl.Marker()
    .setLngLat([2.35, 48.85])
    .addTo(map);

Cette ligne va ajouter un pin (un marqueur) aux coordonnées 2.35, 48.85, c’est-à-dire approximativement à Paris.

Affichage d'un marqueur à Paris

La seconde étape va être de créer une liste de voyages et d’afficher un marqueur pour chacun d’eux.
En JavaScript (le langage utilisé pour écrire les lignes précédentes) on peut créer des listes d'objets. Ici un objet représentera notre voyage et sera entre accolades {}, et la liste sera représenté par des crochets []
Voilà un exemple avec 3 voyages:

var trips = [{ 
    coordinates: [2.35, 48.85],
}, { 
    coordinates: [-74, 40.71],
}, { 
    coordinates: [-7.99, 31.62],
}]

Maintenant que nous avons une liste, nous allons devoir itérer (effectuer une opération pour chaque élément de la liste) sur les voyages pour les afficher.
Vous pouvez donc retirer l'exemple précédent (new Mapboxgl.Marker) et ajouter ce code à la place:

trips.forEach(trip => {
    new mapboxgl.Marker()
       .setLngLat(trip.coordinates)
       .addTo(map);
});

Vous devriez maintenant voir 3 marqueurs sur la carte ! Pour ajouter vos voyages à la place, vous n'avez qu'à remplacer ces trois objets dans la liste par les vôtres, et vous pouvez en ajouter autant que vous voulez.

Ajouter le nom des voyages

Une évolution assez évidente de nos marqueurs serait d’y ajouter le nom du voyage. On va pouvoir utiliser les popup de Mapbox pour ça. Les popups sont assez simples à utiliser, il suffit d’ajouter deux lignes au code affichant le marqueur:

trips.forEach(trip => {
    new mapboxgl.Marker()
        .setLngLat(trip.coordinates)
        .setPopup(new mapboxgl.Popup({ anchor: 'top' }) // ajoute une popup
            .setHTML('<p>Voyage à Marrakech</p>'))
        .addTo(map);
});

Vous devriez maintenant voir le nom de Marrakech s’afficher dans une petite fenêtre sous le marqueur lorsque vous cliquez sur celui-ci.
Evidemment, nous souhaitons voir le bon nom s’afficher sous chaque marqueur, nous allons donc ajouter une propriété à nos objets voyages:

var trips = [{ 
    coordinates: [2.35, 48.85],
    name: 'Paris'
}, { 
    coordinates: [-74, 40.71],
    name: 'New York'
}, { 
    coordinates: [-7.99, 31.62],
    name: 'Marrakech'
}]

et nous allons l’utiliser dynamiquement lorsque nous itérons, pour celà, il suffit de remplacer.setHTML('<p>Voyage à Marrakech</p>')) par.setHTML('<p>' + trip.name + '</p>'))

Popup affichant le nom de Paris

Personnaliser les marqueurs

Pour finir, nous allons chercher à utiliser une image qui correspond à votre site. Pour celà, rien de très compliqué, on va juste aller ajouter un peu de style à notre carte, grâce à la balise style, à placer avant la <div id="map">:

<style>
  .marker {
    background-image: url('https://www.traveledmap.com/images/home/marker-traveled.png');
    background-size: cover;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

Il est aussi nécessaire de créer le marqueur sur un élément que vous ajoutez vous même, en remplaçant les lignes de création de marqueur par les lignes suivantes (notez qu'un offset de 15px est ajouté, 15 étant la moitié de la hauteur du marqueur, définit dans le style ci-dessus):

trips.forEach(trip => {
  var el = document.createElement('div');
  el.className = 'marker';

  new mapboxgl.Marker(el)
    .setLngLat(trip.coordinates)
    .setPopup(new mapboxgl.Popup({ anchor: 'top', offset: 15 })
      .setHTML('<span>' + trip.name + '</span>'))
    .addTo(map);
});

Développez votre propre carte (de voyages) avec Mapbox (Niveau débutant)

De quoi parle cet article ?

Créer la carte

Ajouter des marqueurs

Ajouter le nom des voyages

Personnaliser les marqueurs